import { Space, Image, Avatar, Popconfirm, Table, Tooltip, message } from "antd";
import { ButtonGroup, Button } from "@douyinfe/semi-ui";
import { IconPlusCircle, IconRefresh, IconDelete, IconEdit, IconGlobeStroke, IconEyeOpened } from "@douyinfe/semi-icons";
import { useModel } from "umi";
import { useReactive } from "ahooks";
import Jdenticon from "react-jdenticon";

import useHelperOrganizationApplication from "../../helper/useHelperOrganizationApplication";

const { Column } = Table;

const ApplicationDetailTypes = ({ application, applicationTypes, reloadData, typeLoading }) => {
    const { remoteData } = useModel("global");
    const { kuboUrl } = useModel("kubo");
    const { openCreateApplicationType, openEditApplicationType, openEditApplicationTypeIcon } = useHelperOrganizationApplication();

    const state = useReactive({
        selectedRowKeys: [],
        submitLoading: false,
    });

    const changeOpenStatus = async (item) => {
        state.submitLoading = true;
        let res = await remoteData({
            object: "bnt-application-resource-center-service",
            serviceName: "/developer/application/updateType",
            params: {
                appUuid: item.appUuid,
                appType: item.appType,
                data: { appOpen: !item.appOpen },
            },
        });
        if (res) {
            message.success("成功更改应用客户端开启状态信息");
            reloadData();
        }
        state.submitLoading = false;
    };

    const deleteApplicationType = async (item) => {
        state.submitLoading = true;
        let res = await remoteData({
            object: "bnt-application-resource-center-service",
            serviceName: "/developer/application/deleteType",
            params: {
                appUuid: item.appUuid,
                appType: item.appType,
            },
        });
        if (res) {
            message.success("成功删除应用客户端信息");
            reloadData();
        }
        state.submitLoading = false;
    };

    const TableHeader = () => {
        return (
            <div style={{ display: "flex", justifyContent: "space-between" }}>
                <div style={{ lineHeight: "32px" }}>应用终端信息</div>
                <ButtonGroup>
                    <Button icon={<IconPlusCircle />} onClick={() => openCreateApplicationType(application, applicationTypes, reloadData)}>
                        新应用终端
                    </Button>
                    <Button icon={<IconRefresh />} onClick={reloadData}></Button>
                </ButtonGroup>
            </div>
        );
    };

    const renderIcon = (_, r, i) => {
        let icon =
            kuboUrl && _ ? (
                <Image width={20} src={kuboUrl + _} preview={false} style={{ padding: "5px 0 " }} />
            ) : (
                <div style={{ padding: "3px 0 " }}>
                    <Jdenticon size="24" value={application.appName} />
                </div>
            );
        return (
            <Avatar shape="square" icon={icon} size={32} style={{ backgroundColor: r.appBgco || "#eee" }} onClick={() => openEditApplicationTypeIcon(application, r, reloadData)} />
        );
    };

    const renderOpenEye = (_) =>
        _ && (
            <Tooltip title={_}>
                <a onClick={(e) => electron.shell.openExternal(_)}>
                    <IconGlobeStroke />
                </a>
            </Tooltip>
        );

    const renderEye = (_) =>
        _ && (
            <Tooltip title={_}>
                <IconEyeOpened />
            </Tooltip>
        );

    const renderOpen = (_, r, i) => (
        <Popconfirm title={`确认要更改应用客户端的启用状态吗?`} placement="topRight" okButtonProps={{ loading: state.submitLoading }} onConfirm={(e) => changeOpenStatus(r)}>
            <Button theme="borderless" type={_ ? "primary" : "danger"}>
                {_ ? "启用" : "关闭"}
            </Button>
        </Popconfirm>
    );

    const renderOperate = (_, r, i) => (
        <Space size={0}>
            <Button theme="borderless" icon={<IconEdit />} onClick={() => openEditApplicationType(application, r, reloadData)}></Button>
            {!r.appPubtime && (
                <Popconfirm
                    title={`确认要删除【${r.appType}】的信息?`}
                    placement="topRight"
                    okButtonProps={{ loading: state.submitLoading }}
                    onConfirm={(e) => deleteApplicationType(r)}
                >
                    <Button theme="borderless" icon={<IconDelete style={{ color: "#E91E63" }} />}></Button>
                </Popconfirm>
            )}
        </Space>
    );

    const rowKey = (record) => record.appUuid + record.appType;

    return (
        <Table loading={typeLoading} title={TableHeader} dataSource={applicationTypes} rowKey={rowKey} size="small" bordered pagination={false}>
            <Column title="序号" align="center" width={60} render={(_, r, i) => i + 1} />
            <Column title="图标" dataIndex="appIcon" align="center" render={renderIcon} />
            <Column title="类型" dataIndex="appType" align="center" render={(_, r) => (r.appDesc ? <Tooltip title={r.appDesc}>{_}</Tooltip> : _)} />
            <Column title="路径" dataIndex="appPath" align="center" render={renderEye} />
            <Column title="Git地址" dataIndex="appGitlab" align="center" render={renderEye} />
            <Column title="网址" dataIndex="appGiturl" align="center" render={renderOpenEye} />
            <Column title="当前版本" dataIndex="appVeno" align="center" render={(_) => <span style={{ fontSize: 16 }}>{_}</span>} />
            <Column title="代码大小" dataIndex="appCodesize" align="center" render={(_) => (_ ? helper.byteConvert(parseInt(_)) : "")} />
            <Column title="启用状态" dataIndex="appOpen" align="center" width={100} render={renderOpen} />
            <Column title="操作" align="center" width={100} render={renderOperate} />
        </Table>
    );
};

export default ApplicationDetailTypes;
